在 Workbox 详解篇：预缓存中，我们简单介绍了 workbox-webpack-plugin，本章我们将深入介绍 workbox-webpack-plugin 的底层依赖 workbox-build，通过该模块，我们可以：

• 根据配置，直接生成 Service Worker 脚本；
• 根据配置，生成预缓存列表，并将其附加到已有的 Service Worker 脚本中。
• 接下来，我们将一起探讨 workbox-build 的使用细节。

# generateSW

const { generateSW } = require('workbox-build');

generateSW({
  //... 其他配置
  swDest: 'public/sw.js',
  globDirectory: '.'
}).then(({ count, size, warnings }) => {
  //...doSomething
});

示例中，我们通过 workbox-build 中的 generateSW 方法来生成 Service Worker 脚本，该方法的返回值为 Promise<GenerateSWResult>，其中 GenerateSWResult 为含有以下属性的对象：

• count：预缓存列表中的文件个数。
• size：预缓存文件的总尺寸大小，单位为 byte。
• warnings：构建过程中所产生的警告信息，类型为字符串数组。

该方法的配置属性为：

• swDest：将要生成 Service Worker 脚本的路径及文件名，如果值为相对路径，那么：
  • 如果运行在 node 环境中，路径相对于当前的工作目录。
  • 如果运行在 webpack 环境中，路径相对于 output 配置中的 path 属性。
• importWorkboxFrom：Workbox 入口文件 workbox-sw.js 的加载路径，可选值为：
  • cdn：默认值，将从 Google Cloud Storage 中加载 workbox-sw.js，由于国内网络问题，一般不使用该选项。
  • local：如使用该选项，在构建过程中会将 Workbox 模块代码拷贝到构建目录中，并从该目录中加载 workbox-sw.js。
  • disabled：如使用该选项，Service Worker 脚本将不会包含加载 workbox-sw.js 的代码。
• skipWaiting：是否在 install 事件中调用 skipWaiting 方法（Boolean 类型，默认值为 false），如果该属性的值为 false，Service Worker 脚本将包含以下代码：

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

• clientsClaim：是否在 activate 事件中调用 clients.claim 方法（Boolean 类型，默认值为 false）。
• runtimeCaching：运行时缓存配置，类型为对象数组（默认值为 []），其中每一项包含以下属性：
  • urlPatterns：请求匹配规则，类型为字符串、正则表达式或函数，其中：
    • 值为函数时，用法等同于 Workbox 详解篇：路由设置中 workbox.routing.registerRoute 方法的 capture 参数。
  • handler：请求处理，类型为字符串或函数，其中：
    • 值为字符串时，其值必须为 CacheFirst、CacheOnly、NetworkFirst、NetworkOnly 或 StaleWhileRevalidate。
    • 值为函数时，用法等同于 Workbox 详解篇：路由设置中 workbox.routing.registerRoute 方法的 handler 参数
• method：请求方法，值为 GET、HEAD、POST、PATCH、PUT 或 DELETE，默认值为 GET。